<template>
  <div class="follow-item">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell v-for="(item, index) in list" :key="index">
        <van-image slot="icon" round :src="item.photo"></van-image>
        <span slot="title">{{ item.name }}</span>
        <span slot="label">粉丝数：{{ item.fans_count }}</span>
        <mutual-fans
          :target-id="item.id"
          :status="item.mutual_follow"
          @input="item.mutual_follow=$event"
        ></mutual-fans>
        <!-- <van-button v-if="item.mutual_follow" slot="default" type="danger" size="small">相互关注</van-button>
        <van-button v-else slot="default" type="danger" size="small">取消关注</van-button> -->
      </van-cell>
    </van-list>
  </div>
</template>

<script>
// import { getFansList } from '@/api/user.js'
import { mapState } from 'vuex'
import MutualFans from './mutual-fan.vue'
// import Follow from '../../components/follow.vue'
export default {
  name: 'FollowItem',
  components: {
    MutualFans
  },
  data() {
    return {
      total: null,
      list: [],
      loading: false,
      finished: false,
      page: 1,
      isFollow: null
    }
  },
  computed: {
    ...mapState(['userId'])
  },
  created() {},
  methods: {
    async onLoad() {
    //   const { data } = await getFansList(
    //     {
    //       page: this.page,
    //       per_page: 10
    //     },
    //     this.userId
    //   )
    //   console.log(data.data.results)
      const a = [
        {
          id: 3,
          name: '皮皮虾1254',
          photo: 'http://toutiao-img.itheima.net/Fl3jwyyNTF9kr8L-Qq8VupXj1OcU',
          fans_count: 106,
          mutual_follow: false
        },
        {
          id: 2,
          name: '翔爷',
          photo: 'http://toutiao-img.itheima.net/Ftxsj6MCTJRUpQl7hWCPJdXK5_mD',
          fans_count: 136,
          mutual_follow: false
        },
        {
          id: 1,
          name: 'ggg',
          photo: 'http://toutiao-img.itheima.net/FlXc3PYKO_cjFSuRV6o4pc2n_CDf',
          fans_count: 268,
          mutual_follow: false
        }
      ]
      this.list.push(...a)
      this.page++
      console.log(this.list)
      this.loading = false
      this.finished = true
    //   if (data.data.results.length === 0) {
    //     this.finished = true
    //   }
    }
  }
}
</script>

<style scope lang="less">
.van-cell {
  padding: 28px;
  .van-image {
    width: 80px;
    height: 80px;
    margin-right: 30px;
  }
}
</style>
